<template>
  <div>
    <el-dialog title="工单详情" :visible.sync="show" width="800px" append-to-body @close="cancel">
      <div v-if="row.id">
        <div class="detail-title">基本信息</div>
        <div class="detail-row">
          <div class="detail-row">
            <div class="detail-label">工单编号</div>
            <div class="detail-value">{{ row.number || "--" }}</div>
          </div>
          <div class="detail-row">
            <div class="detail-label">工单标题</div>
            <div class="detail-value">
              <el-tag type="danger" size="mini" v-if="row.type == 1" style="margin-right: 10px;">急</el-tag>
              {{ row.title || "--" }}
            </div>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-row">
            <div class="detail-label">关联项目</div>
            <div class="detail-value">{{ row.projectName || "--" }}</div>
          </div>
          <div class="detail-row">
            <div class="detail-label">发起人员</div>
            <div class="detail-value">{{ row.createByNickName || "--" }}</div>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-row">
            <div class="detail-label">处理人员</div>
            <div class="detail-value">
              {{ row.maintenanceUserNickName || "--" }}
            </div>
          </div>
          <div class="detail-row">
            <div class="detail-label">当前状态</div>
            <div class="detail-value">
              <el-tag :type="[3, 8, 9].includes(row.status) ? 'danger'
      : [6, 7].includes(row.status) ? 'success' : 'primary'">
                {{ getByStatus(row.status) }}
              </el-tag>
            </div>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-row">
            <div class="detail-label">签到地址</div>
            <div class="detail-value">{{ row.signAddress || "--" }}</div>
          </div>
          <div class="detail-row">
            <div class="detail-label">签到范围</div>
            <div class="detail-value">{{ row.signRange || "--" }}米</div>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-row">
            <div class="detail-label">提交时间</div>
            <div class="detail-value">{{ row.createTime || "--" }}</div>
          </div>
          <div class="detail-row">
            <div class="detail-label">处理时间</div>
            <div class="detail-value">{{ row.overTime || "--" }}</div>
          </div>
        </div>
        <div class="detail-title">工单内容</div>
        <div class="detail-row">
          <div class="detail-row">
            <div class="detail-label">位置位置</div>
            <div class="detail-value" v-if="row.positionInformation">
              <el-tag v-for="(floor, k) in row.positionInformation.split(',')" :key="k" style="margin: 5px">
                {{ floor }}
              </el-tag>
            </div>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-row">
            <div class="detail-label">系统</div>
            <div class="detail-value">{{ row.systemName || "--" }}</div>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-row">
            <div class="detail-label">设备</div>
            <div class="detail-value" v-if="row.deviceName">
              <el-tag v-for="(floor, k) in row.deviceName.split(',')" :key="k" style="margin: 5px">
                {{ floor }}
              </el-tag>
            </div>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-row">
            <div class="detail-label">故障内容</div>
            <div class="detail-value">{{ row.content || "--" }}</div>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-row">
            <div class="detail-label">位置描述</div>
            <div class="detail-value">{{ row.locationDescription || "--" }}</div>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-row">
            <div class="detail-label">备注</div>
            <div class="detail-value">{{ row.remark || "--" }}</div>
          </div>
        </div>
        <div class="detail-title">附件</div>
        <div class="image-box" v-if="row.annexUrl">
          <div v-for="(url, k) in row.annexUrl.split(',')" :key="k" class="image-item">
            <el-image :src="baseURL + url" :preview-src-list="[baseURL + url]" fit="cover" />
          </div>
        </div>
        <div class="detail-title" v-if="row.examineAnnexUrl || row.auditRemark">
          审核信息
        </div>
        <div class="image-box" v-if="row.examineAnnexUrl">
          <div v-for="(url, k) in row.examineAnnexUrl.split(',')" :key="k" class="image-item">
            <el-image :src="baseURL + url" :preview-src-list="[baseURL + url]" fit="cover" />
          </div>
        </div>
        <div class="detail-row" v-if="row.auditRemark">
          <div class="detail-label">审核备注</div>
          <div class="detail-value">{{ row.auditRemark || "--" }}</div>
        </div>
      </div>
      <div slot="footer">
        <el-button v-for="(btn, k) in functionList" :key="k" type="primary" @click="handleCommand(btn)">
          {{ btn.label }}
        </el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { isOperate } from "@/api/system/order";
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    row: {
      type: Object,
      default: () => { },
    },
  },
  computed: {
    show: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  data() {
    return {
      baseURL: process.env.VUE_APP_BASE_API,
      functionList: [], // 功能按钮列表
      statusList: [
        // 状态列表
        { label: "待负责人审批", value: 1 },
        { label: "待业主审批", value: 2 },
        { label: "被退回", value: 3 },
        { label: "重新发起", value: 4 },
        { label: "维修接单", value: 5 },
        { label: "维修结束", value: 6 },
        { label: "已完结", value: 7 },
        { label: "复验不通过", value: 8 },
        { label: "撤销工单", value: 9 },
        { label: "任务发布", value: 10 },
        // { label: "业主退回", value: 11 },
        // { label: "业主转回机构处理", value: 12 },
        // { label: "待二次复验", value: 13 },
        // { label: "二次复验不通过", value: 14 },
      ],
    };
  },
  watch: {
    show(v) {
      if (v) this.getFunctionList();
    },
  },
  methods: {
    // 状态名称
    getByStatus(status) {
      let row = this.statusList.find((item) => item.value === status);
      return row ? row.label : "";
    },
    // 获取功能按钮列表
    async getFunctionList() {
      const { status } = this.row;
      const { data } = await isOperate({ id: this.row.id });
      let list = [];
      if (status == 1 && data) {
        list.push({ label: "审核通过", type: 10 });
        // list.push({ label: "指定处理人", type: 5 });
        list.push({ label: "退回工单", type: 3 });
      }
      if (status == 6 && data) {
        list.push({ label: "复验通过", type: 7 });
        list.push({ label: "退回工单", type: 8 });
      }
      this.functionList = list;
    },
    // 关闭弹窗
    cancel() {
      this.show = false;
      this.$emit("cancel");
    },
    // 功能按钮操作
    handleCommand(item) {
      this.$emit("command", item);
    },
  },
};
</script>
<style lang="scss" scoped>
.detail-title {
  font-weight: 600;
  font-size: 14px;
  color: #212121;
  padding: 10px;
  position: relative;

  &::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 14px;
    transform: translateY(-50%);
    background: #4ea770;
    border-radius: 10px;
  }
}

.detail-row {
  flex: 1;
  display: flex;
  padding: 10px;
  align-items: center;

  .detail-label {
    width: 80px;
    font-size: 14px;
    color: #313131;
    font-weight: 600;
  }

  .detail-value {
    font-size: 14px;
    color: #757575;
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    div {
      text-align: right;
    }
  }

  .detail-floor {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    flex: 1;

    .floor-item {
      color: #909399;
      font-size: 12px;
      border-radius: 4px;
      padding: 3px 10px;
      border: 1px solid #dedede;
      margin: 0 5px 5px 0;
    }
  }
}

.image-box {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  width: 100%;
  margin-top: 10px;
  padding: 0 15px;
  box-sizing: border-box;

  .image-item {
    position: relative;
    height: 80px;
    width: 80px;
    overflow: hidden;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.1);

    .el-image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
